<template>
    <link type="text/css" rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/rateinfo.css">

    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>订单评价</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 收货地址 -->
            <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" v-if="address" :editable="false" />

            <!-- 商品评价 -->
            <div class="aui-commodity-bg">
                <div class="items" v-for="(item,key) in product" :key="item.id">
                    <div class="aui-flex-pro">
                        <div class="aui-commodity-img">
                            <img :src="item.products.thumbs_text" />
                        </div>
                        <div class="aui-flex-box">
                            <h4 class="van-ellipsis">商品名称：{{ item.products.name }}</h4>
                            <p>商品单价：￥{{item.price}}</p>
                            <!-- 卡片的插槽部分 -->
                            <template v-if="item.attrs">
                            <van-tag v-for="(attr,index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
                            </template>
                            <template v-else>
                            <van-tag class="tag" type="danger">无规格数据</van-tag>
                            </template>
                        </div>
                        <div class="aui-flex-num">
                            <h5>￥{{item.total}}</h5>
                            <p class="aui-sml-text">X{{item.pronum}}</p>
                        </div>
                    </div>

                    <!-- 评价信息 -->
                    <van-form @submit="submit">
                        <van-field name="rate">
                            <template #input>
                                <van-rate v-model="item.rate" allow-half />
                            </template>
                        </van-field>

                        <van-field 
                            v-model="item.comment"
                            name="comment"
                            rows="2"
                            autosize
                            type="textarea"
                            maxlength="120"
                            placeholder="请输入商品评价"
                            show-word-limit
                            :rules="[{required: true, message: '请输入商品评价'}]"
                        />

                        <van-field name="uploader">
                            <template #input>
                                <van-uploader multiple v-model="item.thumbs.value" :max-count="6" />
                            </template>
                        </van-field>

                        <div style="width:50%;margin:1em auto;">
                            <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit" @click="SubmitID(item.id)">提交</van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </section>
    </section>

</template>

<script setup>
    const { proxy } = getCurrentInstance()

    let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
    let address = ref(null)
    let product = ref([])
    
    let orderproid = (null)

    onBeforeMount(() => {
        OrderData()
    })

    const OrderData = async () => 
    {
        var params = {
            orderid: orderid,
            busid: proxy.$business.value.id
        }

        var result = await proxy.$POST({
            url: '/order/info',
            params
        })

        if (result.code == 0) {
            proxy.$fail(result.msg)
            return false
        }

        address.value = result.data.address

        if(result.data.product)
        {
            result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
        }

        product.value = result.data.product
        product.value.map(item => item.thumbs = ref([item.thumbs]))
        console.log(product.value)

    }

    //获得商品订单id
    const SubmitID = (id) => orderproid = id

    //表单提交
    const submit = async (values) =>
    {
      if(!values.rate)
      {
        proxy.$fail('请给评分')
        return false
      }
  
      var params = {
        orderid: orderid,
        orderproid: orderproid,
        busid: proxy.$business.value.id,
        rate: values.rate,
        comment: values.comment,
        thumbs: [],
      }

      if(values.uploader.length > 0)
      {
        values.uploader.map((item) => {
          params.thumbs.push(item.file)
        })
      }
  
      //接口调用
      if(params.thumbs.length > 0) //有图片
      {
          var result = await proxy.$UPLOAD({
              url: '/order/rate',
              params
          })
      }else  //没有图片
      {
          var result = await proxy.$POST({
              url: '/order/rate',
              params
          })
      }
      
      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }else
      {
        proxy.$success({
          message: result.msg,
        })
        return false
      }
    }
</script>